<template>
    <div class="wrapper">
        <h1>体检预约-登录</h1>
        <section>
            <div class="input-box">
                <i class="fa fa-user-o"></i>
                <input type="text" placeholder="输入手机号" v-model="form.userid" />
            </div>
            <div class="input-box">
                <i class="fa fa-lock"></i>
                <input type="password" placeholder="输入登录密码" v-model="form.password" />
            </div>
            <div class="reg-box">
                <p @click="navigateTo('/register')">注册</p>
                <p @click="navigateTo('/foundback')">忘记密码？</p>
            </div>
            <button class="button-box" @click="login">登录</button>
        </section>

        <footer>
            <div>
                <div class="line"></div>
                <p>有疑问请联系客服</p>
                <div class="line"></div>
            </div>
            <p>4008-XXX-XXX</p>
        </footer>
    </div>
</template>

<script setup>
import "../../style/css/login.css";
import { setSessionStorage } from "../../utils/common";
import { useRouter } from "vue-router";
import { reactive } from "vue";
import axios from "axios";

const router = useRouter();
const form = reactive({
    userid: '',
    password: ''
});

// 登录处理
const login = async () => {
    try {
        const res = await axios.post("/api/login", form);
        if (res.data.status === 200) {
            setSessionStorage("user", res.data.data);
            router.push("/");
        } else {
            alert("登录失败，请重试");
        }
    } catch (error) {
        console.error("登录出错:", error);
        alert("登录过程中发生错误，请稍后再试");
    }
};

// 路由跳转
const navigateTo = (path) => {
    router.push(path);
};
</script>